import React from 'react'
import MyHead from '../../components/MyHead'
import { Form, Input, Button } from 'antd-mobile'
import { ShowError, ShowMsg } from '../../utils/message'
import InputPass from '../../components/InputPass'
import { reg } from '../../utils/validate'
import { useSelector } from 'react-redux';
import { Ajax } from './../../api/api';
import { useNavigate } from 'react-router-dom';

const ChangePass = () => {
    const [form] = Form.useForm()
    const userInfo = useSelector((state: any) => state.data.userInfo)
    const router = useNavigate()
    const onFinish = async (value: any) => {
        if (value.newpass == value.oldpass) {
            ShowMsg('新密码不能和原始密码一致')
        } else {
            let res: any = await Ajax.changeuserinfo({
                password: value.newpass
            }) as any
            if (res.code == 200) {
                ShowMsg('修改成功')
                router('/login')
            }
        }
    }

    return (
        <div className='pg'>
            <MyHead title='修改密码' />
            <div className="pd10">
                <Form
                    form={form}
                    onFinish={onFinish}
                    onFinishFailed={() => ShowMsg('请输入有效的密码')}
                    layout={'horizontal'}
                    initialValues={{
                        oldpass: userInfo ? userInfo.password : ''
                    }}
                    footer={
                        <div>
                            <Button block type='submit' color='success' size='middle'>
                                提交
                            </Button>
                            <Button block type='reset' className='mt10' color='danger' size='middle'>
                                重置
                            </Button>
                        </div>
                    }
                >
                    <Form.Header>请确认是否真的修改哦~</Form.Header>
                    <InputPass
                        name='oldpass'
                        label='旧密码'
                        placeholder='请输入旧密码'
                    />
                    <InputPass
                        name='newpass'
                        label='新密码'
                        placeholder='请输入新密码'
                    />
                    <InputPass
                        name='dbnewpass'
                        label='确认新密码'
                        placeholder='请输入确认新密码'
                        dependencies={['newpass']}
                        rules={[
                            ({ getFieldValue }) => ({
                                validator(_: any, value: string) {
                                    if (reg.pwd.test(value) && reg.pwd.test(getFieldValue('newpass'))) {
                                        if (getFieldValue('newpass') === value) {
                                            return Promise.resolve();
                                        } else {
                                            return Promise.reject(new Error('两次密码不一致'));
                                        }
                                    } else {
                                        return Promise.reject(new Error(''));
                                    }
                                },
                            }),
                        ]}
                    />
                </Form>
            </div>
        </div>
    )
}

export default ChangePass